Estaba tratando de crear una página que aleatoriza 3 números del 1 al 20. Encontré un problema cuando intentaba usar document.getElementById. Estaba tratando de sustituir el valor de id="grande", pero por alguna razón desconocida, siempre obtenía [objeto HTMLParagraphElement].
Aquí está el código fuente:
<html> <body onload = "myFunction()"> <div class="intro"></div> <h1>The Egg Hunt</h1> <p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p> <p>These are the points gathered by the three participants: </p> </div> <div class="points"> <div class="first"> <p>Antonio</p> <p id="num1"></p> </div> <div class="second"> <p>Jonathan</p> <p id="num2"></p> </div> <div class="third"> <p>Willy</p> <p id="num3"></p> </div> </div> <div class="info"> <p>The one who got the most points is: </p> <p id="large"></p> </div> <script> function myFunction() { let x = Math.floor((Math.random() * 20) + 1 ); document.getElementById("num1").innerHTML = x; let y = Math.floor((Math.random() * 20) + 1 ); document.getElementById("num2").innerHTML = y; let z = Math.floor((Math.random() * 20) + 1 ); document.getElementById("num3").innerHTML = z; let largest; if(num1 >= num2 && num1 >= num3){ largest = num1; document.getElementById("large").innerHTML = largest; } else if (num2 >= num1 && num2 >= num3){ largest = num2; document.getElementById("large").innerHTML = largest; } else{ largest = num3; document.getElementById("large").innerHTML = largest; } } </script> </body>num1 , num2 y num3 no están definidos en su Javascript. Automáticamente, se referirán a la id definida en HTML como variables globales y se usarán como elementos p para su caso. Por lo tanto, la solución puede ser modificar x , y y z en esas variables num para anularlas.
<html> <body onload="myFunction()"> <div class="intro"> <h1>The Egg Hunt</h1> <p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p> <p>These are the points gathered by the three participants: </p> </div> <div class="points"> <div class="first"> <p>Antonio</p> <p id="num1"></p> </div> <div class="second"> <p>Jonathan</p> <p id="num2"></p> </div> <div class="third"> <p>Willy</p> <p id="num3"></p> </div> </div> <div class="info"> <p>The one who got the most points is: </p> <p id="large"></p> </div> <script> function myFunction() { const num1 = Math.floor((Math.random() * 20) + 1); document.getElementById("num1").innerHTML = num1; const num2 = Math.floor((Math.random() * 20) + 1); document.getElementById("num2").innerHTML = num2; const num3 = Math.floor((Math.random() * 20) + 1); document.getElementById("num3").innerHTML = num3; let largest; if (num1 >= num2 && num1 >= num3) { largest = num1; } else if (num2 >= num1 && num2 >= num3) { largest = num2 } else { largest = num3; } document.getElementById("large").innerHTML = largest; } </script> </body>Algo como esto funcionaría?
<html> <body onload = "myFunction()"> <div class="intro"></div> <h1>The Egg Hunt</h1> <p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p> <p>These are the points gathered by the three participants: </p> </div> <div class="points"> <div class="first"> <p>Antonio</p> <p id="num1"></p> </div> <div class="second"> <p>Jonathan</p> <p id="num2"></p> </div> <div class="third"> <p>Willy</p> <p id="num3"></p> </div> </div> <div class="info"> <p>The one who got the most points is: </p> <p id="large"></p> </div> <script> function generateNumber() { return Math.floor((Math.random() * 20) + 1 ) } function myFunction() { let x = generateNumber(); document.getElementById("num1").innerText = x; let y = generateNumber(); document.getElementById("num2").innerText = y; let z = generateNumber(); document.getElementById("num3").innerText = z; const largest = Math.max(x, y, z) document.getElementById("large").innerText = largest; } </script> </body>